<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a><cite>权益管理</cite></a>
    <a><cite>兑付申请</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layadmin-search">
      <form class="layui-form" method="post" lay-filter="form_entity_search">
        <script type="text/html" template lay-done="layui.data.sendParams(d.params)">
          <div class="layui-inline">
            <div class="layui-form-label">关键字搜索</div>
            <div class="layui-input-inline">
              <input type="text" name="keyword" value="{{decodeURIComponent(layui.router().search.keyword || '')}}"
                     class="layui-input"
                     placeholder="请输入昵称或手机号">
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-form-label">实物名称</div>
            <div class="layui-input-inline">
              <input type="text" name="name" value="{{decodeURIComponent(layui.router().search.name || '')}}"
                     class="layui-input"
                     placeholder="请输入实物名称">
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-form-label">发货状态</div>
            <div class="layui-input-inline" style="width: 120px">
              <select name="status">
                <option value="">全部</option>
                <option value="unshipped">未发货</option>
                <option value="shipped">已发货</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-form-label">日期范围</div>
            <div class="layui-inline" id="date_range">
              <div class="layui-input-inline">
                <input type="text" name="start_date" autocomplete="off" id="start_date" class="layui-input"
                       style="width: 100px" value="{{layui.router().search.start_date || ''}}"
                       placeholder="开始日期">
              </div>
              <div class="layui-input-inline">~</div>
              <div class="layui-input-inline">
                <input type="text" name="end_date" autocomplete="off" id="end_date" class="layui-input"
                       style="width: 100px" value="{{layui.router().search.end_date || ''}}"
                       placeholder="结束日期">
              </div>
            </div>
          </div>
          <div class="layui-inline layui-btn-group">
            <button type="submit" lay-submit class="layui-btn" lay-filter="submit_entity_search">
              <i class="layui-icon layui-icon-search"></i>查询
            </button>
            <button type="submit" lay-submit class="layui-btn layui-btn-warm"
                    lay-filter="reset_entity_search">
              <i class="layui-icon layui-icon-close"></i>重置
            </button>
            <button type="submit" lay-submit class="layui-btn"
                    lay-filter="btn_export">
              <i class="layui-icon layui-icon-export"></i>申请列表导出
            </button>
            <a class="layui-btn layui-btn-normal" lay-href="rights/apply_update">
              <i class="layui-icon layui-icon-add-1"></i>批量更新发货状态
            </a>
          </div>

        </script>
      </form>
    </div>
    <div class="layui-card-body">
      <div id="table_entity"></div>
      <script type="text/html" id="tpl_phone">
        {{# if (d.user) { }}
        {{d.user.mobile}}
        {{# if (d.user.nickname) { }}
        ({{d.user.nickname}})
        {{# } }}
        {{# } }}
      </script>
      <script type="text/html" id="tpl_status">
        {{# if (d.status.value === 'unshipped') { }}
        <span class="layui-font-red">{{d.status.description}}</span>
        {{# } }}
        {{# if (d.status.value === 'shipped') { }}
        <span class="layui-font-blue">{{d.status.description}}</span>
        {{# } }}
      </script>
      <script type="text/html" id="tpl_tool">
        <a class="layui-table-link" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑单号</a>
      </script>
    </div>
  </div>
</div>

<script>
  layui.data.sendParams = function (obj) {
    layui.use(['fox_table', 'laydate'], function () {
      let $ = layui.$
        , fox_table = layui.fox_table
        , form = layui.form
        , admin = layui.admin
        , view = layui.view
        , laydate = layui.laydate

      form.render(null, 'form_entity_search')
      laydate.render({
        elem: '#date_range'
        , range: ['#start_date', '#end_date']
        , max: (new Date()).toDateString()
      });

      let resourceUrl = 'agent-admin/rights_entity_apply'

      // 列表查询
      fox_table.render({
        id: 'table_entity'
        , url: resourceUrl
        , cols: [[
          {title: 'ID', field: 'id', width: 60, align: "center", sort: true}
          , {title: '手机号(昵称）', width: 200, align: "left", templet: '#tpl_phone'}
          , {
            title: '实物名称', field: 'entity', minWidth: 100, align: "left", templet:
              '<div>{{ d.entity ? d.entity.name : "" }}</div>'
          }
          , {
            title: '绑定资产', field: 'product', width: 120, align: "left", templet:
              '<div>{{ d.product ? d.product.name : "" }}</div>'
          }
          , {title: '提交申请时间', field: 'created_at', width: 165, align: "center"}
          , {title: '兑付数量', field: 'exchange_count', width: 100, align: "center"}
          , {title: '发货状态', templet: '#tpl_status', width: 100}
          , {title: '操作', width: 120, align: 'center', fixed: 'right', toolbar: '#tpl_tool'}
        ]]
      });

      //监听操作栏
      fox_table.toolbar(function (obj) {
        let data = obj.data;
        if (obj.event === 'edit') {
          showForm(data);
        }
      });
      //添加
      $('#btn_add_entity').click(function () {
        showForm();
        return false;
      });
      //导出
      form.on('submit(btn_export)', function (data) {
        layer.load();
        admin.post('agent-admin/rights_entity_apply/export', data.field, function (res) {
          layer.confirm('数据下载中，请到下载中心查看下载任务进度.', function (index) {
            layer.close(index);
            location.hash = '/ops/download';
            return false;
          });
          layer.closeAll('loading');
        }, {hasLoading: true})
        return false;
      });
      //搜索
      form.on('submit(submit_entity_search)', function (d) {
        fox_table.reload(d.field);
        return false;
      });
      //重置
      form.on('submit(reset_entity_search)', function (d) {
        form.val("form_entity_search", {
          "keyword": ""
          , "name": ""
          , "start_date": ""
          , "end_date": ""
          , "status": ""
        });
        fox_table.reload({});
        return false;
      });

      //编辑
      function showForm(data) {
        data = data || {};
        let minWidth = '400px';
        let minHeight = '350px';
        admin.popup({
          title: '发货'
          , area: [minWidth, minHeight]
          , id: 'popup_entity'
          , success: function (layero, index) {
            view(this.id).render('rights/apply_edit', data).done(function () {
              form.on('submit(submit_entity)', function (d) {
                if ((d.field.express_name.trim() && !d.field.logistics_no.trim()) || (!d.field.express_name.trim() && d.field.logistics_no.trim())) {
                  layer.msg('快递名称和物流单号必须同时输入')
                  return
                }

                layer.load();
                let field = d.field;
                admin.post(resourceUrl, field, function (res) {
                  layer.closeAll();
                  fox_table.reload();
                }, {hasLoading: true})
              })
            })
          }
        })
      }
    })
  }
</script>

